<template>
	<view>
		<view class="bg-white u-p-l-16 u-p-r-16">
			<u--form labelPosition="left" :model="form" :rules="rules" errorType="toast" ref="uForm"
				:labelStyle="labelStyle" labelWidth="140rpx">
				<u-form-item label="收货人" prop="name">
					<u--input v-model="form.name" placeholder="请输入收货人" border="none"></u--input>
				</u-form-item>
				<u-form-item label="联系电话" prop="phone">
					<u--input v-model="form.phone" placeholder="请输入联系电话" border="none"></u--input>
				</u-form-item>
				<u-form-item @click=" regionVisible = true; hideKeyboard()" label="所在地区" prop="area">
					<u--input v-model="form.area" disabled disabledColor="#ffffff" placeholder="请选择所在地区"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>
				<u-form-item label="详情地址" prop="detailsAddress">
					<u--input v-model="form.detailsAddress" placeholder="街道门牌信息(请精确到门牌号)" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view class="u-m-t-20 bg-white u-p-t-20 u-p-b-20 u-p-l-16 u-p-r-16 flex align-center justify-between">
			<view>设置为默认地址</view>
			<view>
				<u-switch v-model="form.status" activeValue="1" inactiveValue="0" activeColor="#FF5B00"></u-switch>
			</view>
		</view>

		<view @click="submit" class="u-m-l-20 u-m-r-20 footer">
			<u-button type="primary" shape="circle" color="#FF5B00" text="提 交"></u-button>
		</view>

		<w-picker :visible.sync="regionVisible" mode="region" :value="defaultRegion" default-type="value"
			:hide-area="false" @confirm="onConfirm($event, 'region')" @cancel="onCancel" ref="region"></w-picker>

	</view>
</template>

<script>
	import {
		addUserAddressInfo,
		editUserAddressInfo,
		getUserAddressInfoDetails
	} from '@/common/api/api.js'


	export default {
		data() {
			return {
				switchOff: true,
				regionVisible: false,
				defaultRegion: ['110000', '110100', '110101'],
				params: {
					id: ''
				},
				labelStyle: {
					color: '#666666'
				},
				form: {
					id: '',
					name: '', //收件人
					phone: '', //电话
					area: '', //区域
					detailsAddress: '', //详细地址
					status: '', //状态（默认）
					userId: '',
					userInfoId: '',
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['change']
					},
					phone: {
						type: 'string',
						required: true,
						message: '请填写联系电话',
						trigger: ['change']
					},
					area: {
						type: 'string',
						required: true,
						message: '请选择所在地区',
						trigger: ['change']
					},
					detailsAddress: {
						type: 'string',
						required: true,
						message: '请填写详细地址',
						trigger: ['change']
					}
				},
			}
		},
		onLoad(options) {
			if (options.id) {
				this.params.id = options.id;
				this.getUserAddressInfoDetails();
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate().then(res => {
					if (this.form.id) {
						this.editUserAddressInfo();
					} else {
						this.addUserAddressInfo();
					}
				})
			},
			//地址详情
			getUserAddressInfoDetails() {
				getUserAddressInfoDetails(this.params).then(res => {
					this.form = res.data;
				})
			},
			//添加地址
			addUserAddressInfo() {
				this.form.userId = this.$store.state.$token;
				this.form.userInfoId = this.$store.state.$token;
				addUserAddressInfo(this.form).then(res => {
					uni.$u.toast('提交成功');
					this.back();
				})
			},
			//修改地址
			editUserAddressInfo() {
				editUserAddressInfo(this.form).then(res => {
					uni.$u.toast('提交成功');
					this.back();
				})
			},
			back() {
				setTimeout(res => {
					let pages = getCurrentPages(); //获取所有页面栈实例列表
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					uni.navigateBack({
						data: 1,
						success: function() {
							prevPage.$vm.refresh();
						}
					});
				}, 1000)
			},
			onConfirm(e) {
				this.form.area = e.obj.province.label + e.obj.city.label + e.obj.area.label;
			},
			onCancel() {},
			hideKeyboard() {
				uni.hideKeyboard()
			}
		}
	}
</script>

<style>
	.footer {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding-bottom: 40rpx;
		padding-top: 20rpx;
	}
</style>